<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户主页</title>
    <script src="js/jquery-3.6.3.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <script src="js/bootstrap.js"></script>
    <script>
        $(function (){

            let user = null;

            $.ajax({
                    url: "/user/info",
                    type: "get",
                    success: function (data) {
                        let r = data;
                        if (r.code === 1) {
                            user = r.data
                            $("#id").text(user.id.slice(1))
                            $("#name").val(user.name)
                            $("#email").val(user.email)
                            $("#address").val(user.address)
                            $("#sex").val(user.sex)
                            $("#notice").hide()
                            $("#infoBox").show()
                            alert("欢迎登录本商城！")
                        } else {
                            c=confirm(r.msg)
                            if(!c){
                                logout()
                            }
                        }
                    }
                }
            )

            function logout(){
                $.ajax({
                        url: "/user/logout",
                        type: "post",
                        success: function (data) {
                            let r = data;
                            if (r.code === 1) {
                                alert(r.data)
                                window.location.href="/front/login.html"
                            } else {
                                alert(r.msg)
                            }
                        }
                    }
                )
            }

            $("#btnLogout").click(
                function () {
                    logout()
                }
            )

            $("#btnUpdate").click(
                function (){
                    $.ajax({
                            url: "/user/update",
                            type: "post",
                            data: JSON.stringify({
                                "name": $("#name").val(),
                                "email": $("#email").val(),
                                "address": $("#address").val(),
                                "sex": $("#sex").val()
                            }),
                            contentType: "application/json",
                            dataType: "json",
                            success: function (data) {
                                let r = data;
                                if (r.code === 1) {
                                    user=r.data
                                    $("#name").val(user.name)
                                    $("#email").val(user.email)
                                    $("#address").val(user.address)
                                    alert("修改成功")
                                } else {
                                    alert(r.msg)
                                }
                            }
                        }
                    )
                }
            )

            let pages = 1
            let current = 0
            let sellers = null
            let goods = null
            let carts = null
            let pages_goods = 1
            let current_goods = 0
            let pages_cart = 1
            let current_cart = 0
            let seller = null

            //展示商品部分
            function setGoodsBtn(){
                $(".btnDetail").each(function () {
                    $(this).click(
                        function () {
                            $.ajax({
                                url: "/goods/details",
                                type: "post",
                                data: JSON.stringify({
                                    "id": $(this).attr("value")
                                }),
                                contentType: "application/json",
                                dataType: "json",
                                success: function (data) {
                                    let r = data;
                                    if(r.code===1){
                                        window.localStorage.setItem("goods", JSON.stringify(r.data))
                                        window.location.href = "/front/goodsDetail.html"
                                    }
                                    else{
                                        alert(r.msg)
                                    }
                                }
                            })
                        }
                    )
                })
            }

            function getGoodsPage(pageNum){

                if(pageNum<=0||pageNum>pages_goods){
                    return
                }

                let table = $("#goodsTable")
                table.empty()
                goods = null

                $.ajax({
                    url: "/goods/pageForUser",
                    type: "post",
                    data: JSON.stringify({
                        "seller": seller,
                        "pageNum": pageNum
                    }),
                    contentType: "application/json",
                    dataType: "json",
                    success: function (data) {
                        let r = data;
                        if(r.code===1){
                            pages_goods = r.data.pages

                            $("#goodsPageNum").attr("max", pages_goods)

                            current_goods = r.data.current
                            if(pages_goods<=0){
                                current_goods=0
                            }

                            $("#goodsPageNum").val(current_goods)

                            goods = r.data.records
                            if(current_goods<=1){
                                $("#btnLastGoods").parent("li").addClass("disabled")
                            }
                            else{
                                $("#btnLastGoods").parent("li").removeClass("disabled")
                            }

                            if(current_goods>=pages_goods){
                                $("#btnNextGoods").parent("li").addClass("disabled")
                            }
                            else{
                                $("#btnNextGoods").parent("li").removeClass("disabled")
                            }

                            for (let i = 0; i < goods.length; i++) {
                                let good = goods[i]

                                table.append(
                                    "<tr>"+
                                    "<td><label>" + good.name+ "<label/></td>"+
                                    "<td><label>" + good.price/100.0+ "元<label/></td>"+
                                    "<td><label>还有 " + good.count+ " 件<label/></td>"+
                                    "<td>" +
                                    "<button class='btnDetail btn-info' value='" + good.id + "'>查看详情</button>" +
                                    "</td>"+
                                    "</tr>"
                                )
                            }

                            setGoodsBtn()

                            $("#goodsLabelPage").text("     共 "+pages_goods+" 页，当前第 "+current_goods+" 页，跳转到")
                        }
                        else {
                            alert(r.msg)
                        }
                    }
                })
            }

            $("#btnLastGoods").click(
                function (){
                    getGoodsPage(current_goods-1)
                }
            )

            $("#btnNextGoods").click(
                function (){
                    getGoodsPage(current_goods+1)
                }
            )

            $("#btnPageGoods").click(
                function (){
                    getGoodsPage($("#goodsPageNum").val())
                }
            )

            //展示商店部分
            function setBtn(){
                $(".btnSeller").each(function () {
                    $(this).click(
                        function () {
                            seller = $(this).attr("value")
                            $("#sellerName").text($(this).parent().parent().find(".name").text()+"的商品")
                            if(pages_goods==0){
                                pages_goods=1
                            }
                            getGoodsPage(1)
                            $("#infoBox").hide()
                            $("#sellerBox").hide()
                            $("#cartBox").hide()
                            $("#goodsBox").show()
                        }
                    )
                })
            }

            function getPage(pageNum){

                if(pageNum<=0||pageNum>pages){
                    return
                }

                let table = $("#sellerTable")
                table.empty()
                sellers = null
                seller = null

                $.ajax({
                        url: "/seller/page",
                        type: "post",
                        data: JSON.stringify({
                            "pageNum": pageNum,
                        }),
                        contentType: "application/json",
                        dataType: "json",
                        success: function (data) {
                            let r = data;
                            if (r.code === 1) {

                                pages = r.data.pages

                                $("#pageNum").attr("max", pages)

                                current = r.data.current
                                if(pages<=0){
                                    current=0
                                }

                                $("#pageNum").val(current)

                                sellers = r.data.records
                                if(current<=1){
                                    $("#btnLast").parent("li").addClass("disabled")
                                }
                                else{
                                    $("#btnLast").parent("li").removeClass("disabled")
                                }

                                if(current>=pages){
                                    $("#btnNext").parent("li").addClass("disabled")
                                }
                                else{
                                    $("#btnNext").parent("li").removeClass("disabled")
                                }

                                for (let i = 0; i < sellers.length; i++) {
                                    let seller = sellers[i]

                                    table.append(
                                        "<tr>"+
                                        "<td><label class='name'>" + seller.name+ "<label/></td>"+
                                        "<td><label>" + seller.address+ "<label/></td>"+
                                        "<td>" +
                                        "<button class='btnSeller btn-info' value='" + seller.id + "'>进入商店</button>" +
                                        "</td>"+
                                        "</tr>"
                                    )
                                }

                                setBtn()

                                $("#labelPage").text("     共 "+pages+" 页，当前第 "+current+" 页，跳转到")
                            } else {
                                alert(r.msg)
                            }
                        }
                    }
                )
            }

            $("#btnShow").click(
                function (){
                    $(".headMenu").find("li").removeClass("active")
                    $(this).parent().addClass("active")
                    if(pages==0){
                        pages=1
                    }
                    getPage(1)
                    $("#infoBox").hide()
                    $("#goodsBox").hide()
                    $("#cartBox").hide()
                    $("#sellerBox").show()
                }
            )

            $("#backSeller").click(
                function (){
                    $("#btnShow").click()
                }
            )

            $("#btnLast").click(
                function (){
                    getPage(current-1)
                }
            )

            $("#btnNext").click(
                function (){
                    getPage(current+1)
                }
            )

            $("#btnPage").click(
                function (){
                    getPage($("#pageNum").val())
                }
            )

            //查看购物车
            function setCartBtn(){
                $(".btnCartDetail").each(function () {
                    $(this).click(
                        function () {
                            $.ajax({
                                url: "/goods/details",
                                type: "post",
                                data: JSON.stringify({
                                    "id": $(this).attr("value")
                                }),
                                contentType: "application/json",
                                dataType: "json",
                                success: function (data) {
                                    let r = data;
                                    if(r.code===1){
                                        window.localStorage.setItem("goods", JSON.stringify(r.data))
                                        window.location.href = "/front/goodsDetail.html"
                                    }
                                    else{
                                        alert(r.msg)
                                    }
                                }
                            })
                        }
                    )
                })
                $(".btnOrder").each(function () {
                    $(this).click(
                        function () {
                            $.ajax({
                                url: "/cart/toOrder",
                                type: "post",
                                data: JSON.stringify({
                                    "id": $(this).attr("value")
                                }),
                                contentType: "application/json",
                                dataType: "json",
                                success: function (data) {
                                    let r = data;
                                    if(r.code===1){
                                        window.localStorage.setItem("order", JSON.stringify(r.data))
                                        window.localStorage.setItem("address", user.address)
                                        window.localStorage.setItem("email", user.email)
                                        window.location.href = "/front/newOrder.html"
                                    }
                                    else{
                                        alert(r.msg)
                                    }
                                }
                            })
                        }
                    )
                })
                $(".btnRemoveCart").each(function () {
                    $(this).click(
                        function () {
                            $.ajax({
                                url: "/cart/remove",
                                type: "post",
                                data: JSON.stringify({
                                    "id": $(this).attr("value")
                                }),
                                contentType: "application/json",
                                dataType: "json",
                                success: function (data) {
                                    let r = data;
                                    if(r.code===1){
                                        alert(r.data)
                                    }
                                    else{
                                        alert(r.msg)
                                    }
                                }
                            })
                            getCartPage(1)
                        }
                    )
                })
            }

            function getCartPage(pageNum){

                if(pageNum<=0||pageNum>pages_cart){
                    return
                }

                let table = $("#cartTable")
                table.empty()
                carts = null

                $.ajax({
                    url: "/cart/page",
                    type: "post",
                    data: JSON.stringify({
                        "pageNum": pageNum
                    }),
                    contentType: "application/json",
                    dataType: "json",
                    success: function (data) {
                        let r = data;
                        if(r.code===1){
                            pages_cart = r.data.pages
                            current_cart = r.data.current
                            $("#cartPageNum").attr("max", pages_cart)
                            if(pages_cart<=0){
                                current_cart=0
                            }
                            $("#cartPageNum").val(current_cart)

                            carts = r.data.records
                            if(current_cart<=1){
                                $("#btnLastCart").parent("li").addClass("disabled")
                            }
                            else{
                                $("#btnLastCart").parent("li").removeClass("disabled")
                            }

                            if(current_cart>=pages_cart){
                                $("#btnNextCart").parent("li").addClass("disabled")
                            }
                            else{
                                $("#btnNextCart").parent("li").removeClass("disabled")
                            }

                            for (let i = 0; i < carts.length; i++) {
                                let cart = carts[i]

                                table.append(
                                    "<tr>"+
                                    "<td><button class='btnCartDetail btn-info' value='" + cart.goodsid +"'>" +
                                    cart.name +
                                    "</button></td>"+
                                    "<td><label>共" + cart.price/100.0*cart.count+ "元<label/></td>"+
                                    "<td><label>" + cart.count+ " 件<label/></td>"+
                                    "<td>" +
                                    "<button class='btnOrder btn-primary' value='" + cart.id + "'>下订单</button>" +
                                    "<button class='btnRemoveCart btn-danger' value='" + cart.id + "'>移除</button>" +
                                    "</td>"+
                                    "</tr>"
                                )
                            }

                            setCartBtn()

                            $("#cartLabelPage").text("     共 "+pages_cart+" 页，当前第 "+current_cart+" 页，跳转到")
                        }
                        else {
                            alert(r.msg)
                        }
                    }
                })
            }

            $("#btnShowCart").click(
                function (){
                    $(".headMenu").find("li").removeClass("active")
                    $(this).parent().addClass("active")
                    if(pages_cart==0){
                        pages_cart=1
                    }
                    getCartPage(1)
                    $("#infoBox").hide()
                    $("#sellerBox").hide()
                    $("#goodsBox").hide()
                    $("#cartBox").show()
                }
            )

            $("#btnLastCart").click(
                function (){
                    getCartPage(current_cart-1)
                }
            )

            $("#btnNextCart").click(
                function (){
                    getCartPage(current_cart+1)
                }
            )

            $("#btnPageCart").click(
                function (){
                    getCartPage($("#cartPageNum").val())
                }
            )

            $("#btnShowOrder").click(
                function (){
                    window.location.href = "/front/allOrder.html"
                }
            )

            $("#btnInfo").click(
                function (){
                    $(".headMenu").find("li").removeClass("active")
                    $(this).parent().addClass("active")
                    $("#infoBox").show()
                    $("#sellerBox").hide()
                    $("#goodsBox").hide()
                    $("#cartBox").hide()
                }
            )

            $("input").attr("autocomplete", "off")

        })

    </script>
</head>
<body>

    <ul class="nav nav-tabs headMenu">
        <li role="presentation" class="active"><a id="btnInfo">个人信息</a></li>
        <li role="presentation"><a id="btnShow">查看商店</a></li>
        <li role="presentation"><a id="btnShowCart">查看购物车</a></li>
        <li role="presentation"><a id="btnShowOrder">查看订单</a></li>
        <li><a id="btnLogout" class="text-danger">登出</a></li>
    </ul>

    <div id="notice" class="alert alert-danger" role="alert">
        <label>游客访问，请及时登录</label>
    </div>
    <div id="infoBox" class="table-responsive" hidden>
        <div class="page-header">
            <h3>
                个人信息
            </h3>
        </div>
        <table class="table table-bordered table-striped">
            <tr>
                <th>电话</th>
                <td>
                    <label id="id"></label>
                </td>
            </tr>
            <tr>
                <th>姓名</th>
                <td>
                    <input id="name" type="text">
                </td>
            </tr>
            <tr>
                <th>性别</th>
                <td>
                    <select id="sex">
                        <option value="0">男</option>
                        <option value="1">女</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>email</th>
                <td>
                    <input id="email" type="text">
                </td>
            </tr>
            <tr>
                <th>地址</th>
                <td>
                    <input id="address" type="text">
                </td>
            </tr>
            <tr>
                <th>操作</th>
                <td>
                    <button id="btnUpdate" class="btn-primary">修改</button>
                </td>
            </tr>
        </table>
    </div>

    <div id="sellerBox" class="table-responsive" hidden>
        <div class="page-header">
            <h3>
                商店列表
            </h3>
        </div>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <td>商店名</td>
                <td>地址</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="sellerTable">

            </tbody>
        </table>

        <nav aria-label="Page navigation">
            <ul class="pagination" id="sellerPage">
                <li>
                    <a aria-label="Previous" id="btnLast">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a aria-label="Next" id="btnNext">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li style="display: inline">
                    <label for="pageNum" id="labelPage"></label>
                    <input type="number" id="pageNum" min="0" max="1" value="1">
                    <button type="button" class="btn btn-primary btn-xs" id="btnPage">跳转</button>
                </li>
            </ul>

        </nav>
    </div>

    <div id="goodsBox" class="table-responsive" hidden>
        <div class="page-header">
            <h3 id="sellerName">
            </h3>
        </div>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <td>名称</td>
                <td>价格</td>
                <td>库存</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="goodsTable">

            </tbody>
        </table>
        <div class="btn-group">
            <button id="backSeller" class="btn btn-default">退出此商店</button>
        </div>

        <nav aria-label="Page navigation">
            <ul class="pagination" id="goodsPage">
                <li>
                    <a aria-label="Previous" id="btnLastGoods">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a aria-label="Next" id="btnNextGoods">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li style="display: inline">
                    <label for="goodsPageNum" id="goodsLabelPage"></label>
                    <input type="number" id="goodsPageNum" min="0" max="1" value="1">
                    <button type="button" class="btn btn-primary btn-xs" id="btnPageGoods">跳转</button>
                </li>
            </ul>
        </nav>
    </div>

    <div id="cartBox" hidden>
        <div class="page-header">
            <h3>
                购物车
            </h3>
        </div>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <td>名称</td>
                <td>价格</td>
                <td>个数</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="cartTable">

            </tbody>
        </table>

        <nav aria-label="Page navigation">
            <ul class="pagination" id="cartPage">
                <li>
                    <a aria-label="Previous" id="btnLastCart">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a aria-label="Next" id="btnNextCart">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li style="display: inline">
                    <label for="cartPageNum" id="cartLabelPage"></label>
                    <input type="number" id="cartPageNum" min="0" max="1" value="1">
                    <button type="button" class="btn btn-primary btn-xs" id="btnPageCart">跳转</button>
                </li>
            </ul>
        </nav>
    </div>
</body>
</html>